<script setup>
import { useI18n } from "vue-i18n";
import { defineProps, inject, ref } from "vue";
const { t } = useI18n();
const props = defineProps({
  goodsList: {
    type: Array,
    default: [],
  },
  openGoodsAttr: {
    type: Function,
  },
});
</script>
<template>
 <div
          class="overflow-y-auto overflow-hidden rounded-2xl"
          style="height: 68.7vh"
        >
          <a-row :gutter="12">
            <a-col class="goodsCard"
              v-for="(item, index) in goodsList"
              :key="index"
              :xs="{ span: 24, offset: 0 }"
              :lg="{ span: 8, offset: 0 }"
              :md="{ span: 12, offset: 0 }"
            >
              <a-card
                class="rounded-2xl overflow-hidden p-3 mb-4 hover:bg-blue-600"
                :body-style="{ padding: 0 }"
                :bordered="false"
                @click="openGoodsAttr(item)"
              >
                <template #cover>
                  <div class="rounded-lg overflow-hidden">
                    <a-image
                      style="width: 100%"
                      :src="item.image"
                      :preview="false"
                    />
                    <div
                      v-if="item.stock === 0"
                      class="absolute top-0 left-0 bg-gray-600 text-blue-50 trip text-xs"
                    >
                      {{ t("soldOut") }}
                    </div>
                  </div>
                </template>
                <div class="font-500 cursor-pointer pr-1">
                  <div
                    class="overflow-hidden text-ellipsis whitespace-nowrap goodsName"
                  >
                    {{ item.store_name }}
                  </div>
                  <div class="text-lg font-bold text-rose-600 goodsPrice">
                    {{ t("price") }}{{ item.price }}
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
</template>
<style scoped lang="less">
.goodsCard {
  :hover {
    color: #ffffff;

    .goodsName {
      color: #ffffff;
    }

    .goodsPrice {
      color: #ffffff;
    }
  }
}
</style>
